<sqx-title message="i18n:assets.listPageTitle" />
<sqx-layout layout="main" titleIcon="assets" titleText="i18n:common.assets">
    <ng-container menu>
        <div class="row flex-nowrap flex-grow-1 gx-2">
            <div class="col-auto offset-xl-2">
                <button class="btn btn-text-secondary" (click)="reload()" shortcut="CTRL + B" title="i18n:assets.refreshTooltip" type="button">
                    <i class="icon-reset"></i> {{ "common.refresh" | sqxTranslate }}
                </button>
            </div>

            <div class="col" style="width: 300px">
                <div class="row g-0 search">
                    <div class="col-6">
                        <sqx-tag-editor
                            class="tags"
                            [itemsSource]="assetsState.tagsNames | async"
                            [ngModel]="assetsState.selectedTagNames | async"
                            (ngModelChange)="selectTags($event)"
                            placeholder="{{ 'assets.searchByTags' | sqxTranslate }}"
                            styleScrollable="true"
                            undefinedWhenEmpty="false" />
                    </div>

                    <div class="col-6">
                        <sqx-search-form
                            enableShortcut="true"
                            fieldExample="fileSize"
                            formClass="form"
                            placeholder="{{ 'assets.searchByName' | sqxTranslate }}"
                            [queries]="listQueries"
                            [queriesTypes]="'common.assets' | sqxTranslate"
                            [query]="assetsState.query | async"
                            (queryChange)="search($event)" />
                    </div>
                </div>
            </div>

            <div class="col-auto">
                <div class="btn-group">
                    <button class="btn btn-secondary btn-toggle" [class.btn-primary]="listMode" (click)="changeView(true)" [disabled]="listMode" type="button">
                        <i class="icon-list"></i>
                    </button>
                    <button
                        class="btn btn-secondary btn-toggle"
                        [class.btn-primary]="!listMode"
                        (click)="changeView(false)"
                        [disabled]="!listMode"
                        type="button">
                        <i class="icon-grid"></i>
                    </button>
                </div>
            </div>

            <div class="col-auto">
                <button
                    class="btn btn-success"
                    attr.aria-label="{{ 'assets.createFolder' | sqxTranslate }}"
                    (click)="addAssetFolderDialog.show()"
                    shortcut="CTRL + U"
                    title="i18n:assets.createFolderTooltip"
                    type="button">
                    <i class="icon-create_new_folder"></i>
                </button>
            </div>
        </div>
    </ng-container>
    <ng-container>
        <sqx-list-view [isLoading]="assetsState.isLoading | async">
            <ng-container header>
                <sqx-asset-path (navigate)="assetsState.navigate($event.id)" [path]="assetsState.path | async" />
            </ng-container>
            @if (assetsState.path | async; as path) {
                <div>
                    <sqx-assets-list
                        [assetsState]="assetsState"
                        (edit)="editStart($event)"
                        [isDisabled]="false"
                        [isListView]="listMode"
                        [showFolderIcon]="path.length === 0" />
                </div>
            }
            <ng-container footer>
                <sqx-pager (loadTotal)="reloadTotal()" [paging]="assetsState.paging | async" (pagingChange)="assetsState.page($event)" />
            </ng-container>
        </sqx-list-view>
    </ng-container>
    <ng-template sidebarMenu>
        <div class="panel-nav">
            <a
                class="panel-link"
                attr.aria-label="{{ 'common.filters' | sqxTranslate }}"
                queryParamsHandling="preserve"
                replaceUrl="true"
                routerLink="filters"
                routerLinkActive="active"
                sqxTourStep="filter"
                title="i18n:common.filters"
                titlePosition="left">
                <i class="icon-filter"></i>
            </a>
        </div>
    </ng-template>
</sqx-layout>
<router-outlet></router-outlet> <sqx-asset-folder-dialog (dialogClose)="addAssetFolderDialog.hide()" *sqxModal="addAssetFolderDialog" />
<sqx-asset-dialog
    [asset]="editAsset!"
    (assetReplaced)="replaceAsset($event)"
    (assetUpdated)="replaceAsset($event)"
    (dialogClose)="editDone()"
    *sqxModal="editAsset; isDialog: true" />
